import {NTooltip, NDropdown, NIcon, NDataTable, NResult, NImage,} from "naive-ui"
import {defineComponent, ref, h,} from "vue"
import {SettingOutlined, CheckOutlined,} from "@vicons/antd"
import {TextFontSize24Filled, Box24Regular,} from '@vicons/fluent'

export default defineComponent({
    name: "flextalbe",
    props: {
        // 表格数据
        tableData: {
            default(data: any) {
                return Array.isArray(data) ? data : [data]
            },
        },
        // 表格配置
        tableConfig: {
            default(data: any) {
                return data || {
                    // 默认的表格配置
                    striped: true,
                    bordered: true,
                }
            }
        },
        // 表格行列数据配置
        tableColums: {
            default(data: any) {
                return Array.isArray(data) ? data : [data]
            }
        },
        // 顶部元素是否显示
        topConfig: {
            type: Boolean,
            default: false,
        },
        // 加载状态
        loading: {
            type: Boolean,
            default: false,
        },
    },
    setup(props, {slots, emit}) {
        // 最外层的元素
        const containerRef = ref<HTMLElement | null>(null)
        // 设置按钮的下拉框选项
        const settingoptions = ref([])
        // 当前选中的紧凑选项
        const selectCompact = ref<"small" | "medium" | "large" | undefined>("small")
        // 选中的图标，就是个对号
        const tubiao = h(NIcon, {size: 20, color: 'blue'}, {
            default() {
                return [h(CheckOutlined, {},)]
            },
        })
        // 紧凑按钮的下拉框选项
        const compactoptions = ref([
            {
                label: () => {
                    return h("div", {class: {"flex justify-between items-center": true}}, {
                        default() {
                            return [
                                h("span", {}, {
                                    default() {
                                        return selectCompact.value === "small" ? "✔" : null
                                    }
                                }),
                                h("span", {}, {
                                    default() {
                                        return "紧凑"
                                    }
                                })
                            ]
                        }
                    })
                }, key: "small"
            },
            {
                label: () => {
                    return h("div", {class: {"flex justify-between items-center": true}}, {
                        default() {
                            return [
                                h("span", {}, {
                                    default() {
                                        return selectCompact.value === "medium" ? "✔" : null
                                    }
                                }),
                                h("span", {}, {
                                    default() {
                                        return "默认"
                                    }
                                })
                            ]
                        }
                    })
                }, key: "medium"
            },
            {
                label: () => {
                    return h("div", {class: {"flex justify-between items-center": true}}, {
                        default() {
                            return [
                                h("span", {}, {
                                    default() {
                                        return selectCompact.value === "large" ? "✔" : null
                                    }
                                }),
                                h("span", {}, {
                                    default() {
                                        return "宽松"
                                    }
                                })
                            ]
                        }
                    })
                }, key: "large"
            },
        ])
        // 点击下拉框选项
        const handleSelect = () => {
        }
        const handleSelect2 = (key: any) => {
            selectCompact.value = key
        }
        // 表格横向宽度
        const scrollX = ref(1000)
        // 计算横向宽度
        const getscrollX = () => {
        }

        // 空数据的插槽显示
        const emptyVnode = () => (<NResult description={"暂无数据"} v-slots={{
            icon: () => (<NIcon size={50} color={"rgb(0,149,182)"}><Box24Regular/></NIcon>)
        }}/>)
        return () => (<div ref={containerRef} class="w-full h-full">
            {props.topConfig ? <div class="w-full h-30px flex justify-between items-center">
                <div></div>
                <div class="flex">
                    <NDropdown trigger={"click"} options={settingoptions.value} onSelect={handleSelect}>
                        <NIcon class="h-30px w-30px juzhong1 transform transition-all hover:animate-spin" size="25">
                            <SettingOutlined class="dianji"/>
                        </NIcon>
                    </NDropdown>
                    <NDropdown trigger={"click"} options={compactoptions.value} onSelect={handleSelect2}>
                        <NIcon class="h-30px w-30px juzhong1" size="25">
                            <TextFontSize24Filled class="dianji"/>
                        </NIcon>
                    </NDropdown>
                </div>
            </div> : null}
            <NDataTable v-slots={{empty: emptyVnode}} columns={props.tableColums} data={props.tableData}
                        bordered={props.tableConfig.bordered} loading={props.loading} scrollX={scrollX.value}
                        size={selectCompact.value} striped={props.tableConfig.striped}>
            </NDataTable>
        </div>)
    },
})
